<template>
    <div class="listContain">
        <table>
            <tr v-for="dataItem in data" v-bind:key="dataItem"
                @click="this.$router.push({ path: '/customDetail', query: { id: dataItem.id, index: index } })">

                <td style="width: 10px;padding-right: 20px;padding-left: 20px;">
                    <CommonImage :src="dataItem.pictureAddress" class="imgStyle" />
                </td>
                <td class="tdBottom" style="width: 18%">
                    <div style="flex: 1;display: flex;">
                        <span style="padding-right: 20px;">
                            {{ dataItem.customerName == null ? '-' : dataItem.customerName }}
                        </span>
                        <div class="flexTag">
                            <span class="tag1" v-if="dataItem.isTop == '1'">{{ $t('text.Common.l17') }}</span>

                            <span class="tag2" v-if="dataItem.isCollect">{{ $t('text.Common.l18') }}</span>
                            <span class="tag3" v-if="Number(dataItem.dealStatus) > 0">
                                {{ dataItem.dealStatus != '0' ? '' : $t('text.DialogLayout.l282') }}
                                {{ dataItem.dealStatus != '1' ? '' : $t('text.DialogLayout.l283') }}
                                {{ dataItem.dealStatus != '2' ? '' : $t('text.DialogLayout.l284') }}
                                {{ dataItem.dealStatus != '3' ? '' : $t('text.DialogLayout.l285') }}
                                {{ dataItem.dealStatus != '4' ? '' : $t('text.DialogLayout.l286') }}
                                {{ dataItem.dealStatus != '5' ? '' : $t('text.DialogLayout.l287') }}
                            </span>

                            <span class="tag4" v-if="dataItem.customerGrade != null">{{ dataItem.customerGrade }}</span>
                            <span class="tag5" v-if="dataItem.customerType != null">{{ dataItem.customerType }}</span>
                            <span class="tag6" v-if="dataItem.isCorrelation">{{ $t('text.Common.l60') }}</span>
                            <span v-if="dataItem.characteristic != null && dataItem.characteristic != ''">
                                <span v-for="item in dataItem.characteristic.split(',')" v-bind:key="item">
                                    <span class="tag7">{{ item }}&ensp;</span>
                                </span>
                            </span>
                            <span v-if="dataItem.supportingFacilities != null && dataItem.supportingFacilities != ''">
                                <span v-for="item in dataItem.supportingFacilities.split(',')" v-bind:key="item">
                                    <span class="tag7">{{ item }}&ensp;</span>
                                </span>
                            </span>
                        </div>
                    </div>
                    <div style="font-size: 12px;margin-right: 20px;">
                        <CommonOmit :text="dataItem.notes == null ? '-' : dataItem.notes" :length="1"></CommonOmit>
                    </div>
                </td>

                <td class="tdBottom">
                    <span style="color: #f48c9f;font-weight: 700;" v-if="typeIndex == 0">
                        {{ (dataItem.lowerPrice == null ? '-' : String(dataItem.lowerPrice).replace(/\B(?=(\d{3})+(?!\d))/g,
                            ',')
                            + ' - ') }}
                        {{ (dataItem.upperPrice == null ? '-' : String(dataItem.upperPrice).replace(/\B(?=(\d{3})+(?!\d))/g,
                            ',')
                            + ' AED') }}&emsp;
                    </span>
                    <span style="color: #f48c9f;font-weight: 700;" v-if="typeIndex == 1">
                        {{ (dataItem.lowerRent == null ? '-' : String(dataItem.lowerRent).replace(/\B(?=(\d{3})+(?!\d))/g,
                            ',') +
                            $t('text.House.l203')) }}&emsp;
                    </span>
                    <div class="text1">
                        {{ dataItem.houseType == '0' ? $t('text.House.l187') : dataItem.houseType == '1' ?
                            $t('text.House.l188') : dataItem.houseType == '2' ? $t('text.House.l189') :
                                dataItem.houseType == '3' ? $t('text.House.l190') : dataItem.houseType == '3' ?
                                    $t('text.House.l191') :
                                    '-' }}
                    </div>
                </td>

                <td class="tdBottom" style="width: 14%;">
                    <span>{{ dataItem.lowerArea }}-{{ dataItem.upperArea }}m²</span>
                    <div class="text1">
                        {{ dataItem.decorationLevel == null ? '-' : dataItem.decorationLevel }}&ensp;
                    </div>
                </td>

                <td class="tdBottom" style="width: 14%;">
                    <span>{{ dataItem.unitType == null ? '-' : dataItem.unitType + $t('text.House.l198') }}&ensp;</span>
                    <div class="text1">
                        {{ dataItem.lowerStorey }}-{{ dataItem.upperStorey }}{{ $t('text.House.l202') }}&ensp;{{
                            dataItem.toward
                        }} &ensp;
                    </div>
                </td>

                <td class="tdBottom" style="width: 14%;">
                    <span>{{ dataItem.leadWatchCount == null ? '0' : dataItem.leadWatchCount }}{{ $t('text.House.l115')
                    }}</span>
                    <div class="text1">
                        {{ dataItem.areaName == null ? '-' : dataItem.areaName }}
                    </div>
                </td>

                <td class="tdBottom" style="width: 10px;padding-right: 20px;">
                    <span>{{ dataItem.realName }}&ensp;</span>
                    <div class="text1">
                        {{ dataItem.followTime ? dataItem.followTime : dataItem.customerTime }}{{
                            dataItem.eventType
                        }}&ensp;
                    </div>
                </td>

            </tr>
        </table>
    </div>
    <!-- </div> -->
</template>
    
<script>
import CommonImage from '../input/CommonImage.vue';
import CommonOmit from '../input/CommonOmit.vue';
export default {
    name: 'HouseList2',
    components: {
        CommonImage,
        CommonOmit
    },
    props: {
        data: {
            default: [],
        },
        typeIndex: {
            default: 0
        },
        index: [Number, String]
    },
    data() {
        return {
        }
    },
    mounted() {
    },
    methods: {
    },
    watch: {

    },
    computed: {

    }
}
</script>
    
<style scoped>
.tdBottom {
    border-bottom: 1px solid #eee;
}

tr:hover {
    background-color: #f0f0f0;
}

table {
    border-spacing: 0 20px;
}

td {
    text-align: left;
    padding-bottom: 5px;
}

span {
    font-size: 13px;
}


.flexTag {
    display: flex;
    flex-wrap: nowrap;
    word-break: keep-all;
    overflow: auto;
    /* padding-bottom: 7px; */
}

.flexTag::-webkit-scrollbar {
    /*滚动条整体样式*/
    width: 0px;
    /*高宽分别对应横竖滚动条的尺寸*/
    height: 5px;
    background-color: white;
    /*滚动槽颜色*/
}

.flexTag::-webkit-scrollbar-thumb {
    /*滚动条里面小方块*/
    border-radius: 5px;
    -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
    background-color: #79bbff;
    ;
    /*滚动条颜色*/
}

.imgStyle {
    width: 55px;
    height: 55px;
    border-radius: 100%;
}

span {
    color: #6698ff;
    font-size: 15px;
    word-break: keep-all;
    white-space: nowrap;
}

.tag1 {
    font-size: 12px;
    border-radius: 3px;
    background-color: rgb(236, 128, 141);
    padding: 3px 6px;
    color: white;
    margin-right: 5px;
}

.tag2 {
    font-size: 12px;
    border-radius: 3px;
    background-color: #666de1;
    padding: 2px 6px;
    color: white;
    border: 1px solid #666de1;
    margin-right: 5px;
}

.tag3 {
    font-size: 12px;
    border-radius: 3px;
    background-color: #979797;
    padding: 2px 6px;
    color: white;
    border: 1px solid #979797;
    margin-right: 5px;
}

.tag4 {
    font-size: 12px;
    border-radius: 3px;
    background-color: rgb(66, 157, 248);
    padding: 2px 6px;
    color: white;
    border: 1px solid rgb(66, 157, 248);
    margin-right: 5px;
}

.tag5 {
    font-size: 12px;
    border-radius: 3px;
    background-color: #f9cd90;
    padding: 2px 6px;
    color: white;
    border: 1px solid #f9cd90;
    margin-right: 5px;
}

.tag6 {
    font-size: 12px;
    border-radius: 3px;
    background-color: #5ec8b2;
    padding: 2px 6px;
    color: white;
    border: 1px solid #5ec8b2;
    margin-right: 5px;
}

.tag7 {
    font-size: 12px;
    border-radius: 3px;
    background-color: rgb(242, 242, 242);
    padding: 2px 6px;
    color: black;
    border: 1px solid rgb(215, 215, 215);
    margin-right: 5px;
}

.text1 {
    font-size: 12px;
    padding-top: 5px;
    color: rgb(156, 151, 151);
    word-break: keep-all;
    white-space: nowrap;
    text-overflow: -o-ellipsis-lastline;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    line-clamp: 1;
    -webkit-box-orient: vertical;
    max-width: 250px;
}

.listContain {
    display: flex;
    flex-direction: column;
    flex: 1;
    overflow: auto;
    background: white;
    position: relative;
}</style>